/*! Flickity v2.0.10
http://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flickity-prev-next-button:hover { background: white; }

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #333;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* ------------------------------------------------------------------------------
 *
 *  # Prism
 *
 *  Lightweight, extensible syntax highlighter
 *
 *  Version: 1.0
 *  Latest update: May 10, 2015
 *
 * ---------------------------------------------------------------------------- */
code[class*="language-"],
pre[class*="language-"] {
  text-shadow: 0 1px #fff;
  word-break: normal;
  line-height: 1.5;
  direction: ltr;
}
@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata,
.token.punctuation {
  color: #999;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.builtin {
  color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}
.token.function {
  color: #DD4A68;
}
.token.regex,
.token.important {
  color: #e90;
}
.token.important {
  font-weight: bold;
}
.token.entity {
  cursor: help;
}
.namespace {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 20px;
  background: rgba(133, 238, 149, 0.12);
  pointer-events: none;
  white-space: pre;
  line-height: inherit;
}
.line-highlight:before,
.line-highlight:after {
  content: attr(data-start);
  position: absolute;
  top: 0px;
  left: 10px;
  padding: 2px;
  text-align: center;
  font-size: 10px;
  color: #777777;
}
.line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: 0;
}
pre.line-numbers {
  position: relative;
  padding-left: 50px;
  counter-reset: linenumber;
}
pre.line-numbers > code {
  position: relative;
}
.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: 0px;
  width: 36px;
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.line-numbers .line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}
.line-numbers .line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #777777;
  display: block;
  padding-right: 10px;
  text-align: right;
}
pre[class*="language-"] {
  overflow: auto;
  position: relative;
  border-left-width: 3px;
  border-left-color: #31639C;
  background-color: #fdfdfd;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(25, 118, 210, 0.025) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(25, 118, 210, 0.025) 50%);
  background-image: -ms-linear-gradient(transparent 50%, rgba(25, 118, 210, 0.025) 50%);
  background-image: -o-linear-gradient(transparent 50%, rgba(25, 118, 210, 0.025) 50%);
  background-image: linear-gradient(transparent 50%, rgba(25, 118, 210, 0.025) 50%);
  background-size: 3em 3em;
  background-origin: content-box;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
pre[class*="language-"] > code[data-language] {
  display: block;
}
pre[class*="language-"] > code[data-language]:before {
  content: attr(data-language);
  background-color: #f8f8f8;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 11px;
  border-radius: 0 0 0 2px;
  padding: 4px 8px;
  text-shadow: none;
  color: #333333;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
pre[class*="language-"].line-numbers > code[data-language]:before {
  top: -15px;
  right: -15px;
}
pre[data-line] {
  position: relative;
  padding-left: 36px;
}

//* {
//  line-height: calc(1em + 1ex);
//  box-sizing: border-box;
//}
//article {
//  justify-content: center;
//}
.enter {
  animation: move 1s;
}

@keyframes move {
  0% {
    opacity: 0;
    transform: translate(0, 50px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

strong {
  font-weight: bolder;
}



pre,
code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: small;
}


.window {
  margin: 2em auto;
  border: 1px solid;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  // 0px 2px 4px 0px rgba(0, 0, 0, 0.1)
}

.window figcaption {
  display: -webkit-flex;
  display: flex;
  letter-spacing: 1px;
  border-bottom: 1px solid;
  padding-right: 66px;
  padding-left: 12px;
}

.window pre {
  padding: 7px 12px;
  margin: 0;
  line-height: 1.6;
  overflow: scroll;
}

.chrome.btn {
  display: inline-block;
  border-radius: 50%;
  min-width: 12px;
  height: 12px;
  margin: 12px 6px;
  margin-left: 0;
}

.chrome.close {
  background-color: #ff5f56;
  cursor: pointer;
}

.chrome.minimize {
  background-color: #ffbd2e;
}

.chrome.fullscreen {
  background-color: #27c93f;
}

.chrome.title {
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
}

.gist,
.browser {
  text-align: left;
  border-color: #ddd;
  color: #777;
  background-color: #fdfdfc;
}

.gist figcaption,
.browser figcaption {
  background: #fafafa;
  border-bottom-color: inherit;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.gist pre {
  color: #777;
}

.gist .chrome.btn {
  background-color: #ccc;
}

.browser div {
  color: initial;
  padding: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.browser .chrome.btn {
  opacity: 0.5;
}

.browser .chrome.title {
  font-size: 12px;
}

.browser .chrome.title a,
.browser .chrome.title .link {
  background-color: rgba(0, 0, 0, 0.05);
  color: #777;
  border-radius: 4px;
  padding: 0.25em 2em;
  margin: 0.5em auto;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  max-width: 20em;
}

.browser .chrome.title a::before {
  content: '+';
  position: absolute;
  left: 0.5em;
  top: 0.35em;
  display: block;
  border-radius: 100%;
  border: 1px solid currentcolor;
  width: 1em;
  height: 1em;
  line-height: 1;
  padding-left: 0.05em;
  padding-bottom: 0.05em;
  opacity: 0;
  transition: opacity 200ms;
}

.browser .chrome.title a:hover::before,
.browser .chrome.title a:focus::before {
  opacity: 1;
}

.terminal {
  color: #93a1a1;
  background-color: #002b36;
  border-width: 0;
}

.terminal figcaption {
  border-bottom-color: #073642;
  color: #657b83;
}

.terminal .command::before,
.terminal .input::before {
  content: '$ ';
  font-weight: bold;
}

.terminal .input {
  font-weight: bold;
}

.terminal .hl {
  color: #b58900;
}

.terminal .nok {
  color: #dc322f;
}

.terminal .ll {
  color: #586e75;
}

.terminal .chrome.close {
  background-color: #dc322f;
}

.terminal .chrome.minimize {
  background-color: #b58900;
}

.terminal .chrome.fullscreen {
  background-color: #859900;
}

.caret {
  font-weight: bold;
}

.caret.blink {
  animation: blink 1s linear infinite;
  opacity: 1;
}

@keyframes blink {
  0%,
  49% { opacity: 0; }

  50%,
  100% { opacity: 1; }
}

.gallery {
  //width: 100%;
  width: 450px;
  position: relative;
}
.gallery .window pre {
  min-height: 400px;
}

.gallery .window:first-child {
  transform: scale(.7) translate(-98%,5%);
  transform-origin: 0 0;
}

.gallery .window:first-child,
.gallery .window:last-child {
  z-index: -1;
  position: absolute;
  top: 0;
  width: 80%;
}

@media (max-width: 78em) {
  .gallery .window:first-child,
  .gallery .window:last-child {
    display: none;
  }
}

.gallery .window:first-child pre,
.gallery .window:last-child pre {
  height: 420px;
  opacity: 0.8;
  overflow: hidden;
}

.gallery .window:first-child {
  transform: scale(0.7) translate(-98%, 5%);
  transform-origin: 0% 0%;
}
.gallery .window:last-child {
  transform: scale(0.7) translate(130%, 5%);
  transform-origin: 100% 0%;
}


